<template>
  <div class="down" v-if="data">
    <van-nav-bar
      :title="Version.isApp ? '版本更新' : '下载客户端'"
      :left-arrow="!data.force"
      @click-left="$router.push('/home');$router.isBack = true"
      style="width: 100vw"
    />
    <h2>{{ data.versionKey }}版本</h2>
    <p class="force" v-if="data.force">本版本强制更新</p>
    <p class="versionKey" v-if="data.versionKey != versionKey">
      {{ versionKey }}
      &nbsp;
      <van-icon name="arrow" color="#0f0" />
      <van-icon name="arrow" color="#0f0" />
      <van-icon name="arrow" color="#0f0" />
      &nbsp;
      {{ data.versionKey }}
    </p>
    <div class="introduce" v-html="data.introduce"></div>
    <van-progress :percentage="percentageNum" stroke-width="8" style="width: 80%;" v-if="showProgress" />
    <div class="btn">
      <van-button style="background: #aaa;color: #fff;" round
      v-if="Version.isApp && data.versionKey == versionKey"
      >当前已是最新版本</van-button
      >
      <template v-else>
        <van-button type="danger" round @click="adown(data.downUrl)" icon="down"
        >下载客户端</van-button
        >
        <van-button
        type="warning"
        v-if="!data.force && Version.isApp" icon="revoke"
        @click="ignore"
        round
        style="margin-left: 10px"
        >忽略此版本</van-button
        >
      </template>
    </div>
  </div>
</template>

<script>
import { versionKey } from "@/api/config";
import { mapState } from 'vuex'
export default {
  data() {
    return {
      data: {},
      versionKey: 0,
      showProgress: false,
      percentageNum: 0,
      isApp : true
    };
  },
  computed : {
    ...mapState(['Version'])
  },
  methods: {

    adown(url){
      if(this.Version.isApp){
        this.downLoadFile(url)
      }else{
        const ele = document.createElement('a');
        ele.setAttribute('href', url); //设置下载文件的url地址
        ele.setAttribute('download' , 'music');//用于设置下载文件的文件名
        ele.click();
      }
    },

    downLoadFile(url) {
      plus.nativeUI.showWaiting("新版本更新中，请耐心等待~");
      let that = this;
      that.showProgress = true
      var dtask = plus.downloader.createDownload(url, {}, function (d, status) {
        if (status == 200) {
          that.installWgt(d.filename); // 安装wgt资源包
        } else {
          plus.nativeUI.toast("下载更新失败！");
        }
        plus.nativeUI.closeWaiting();
      });

      dtask.start();

      // 下载时实时显示下载进度
      var prg = 0;
      dtask.addEventListener("statechanged", function (task, status) {
        // 给下载任务设置一个监听 并根据状态  做操作
        switch (task.state) {
          case 1:
            //'正在下载';
            break;
          case 2:
            // '已连接到服务器';
            break;
          case 3:
            prg = parseInt(
              (parseFloat(task.downloadedSize) / parseFloat(task.totalSize)) *
                100
            );
            that.percentageNum = prg; // 赋值给进度条组件
            break;
          case 4:
            that.showProgress = false; // 进度隐藏
            break;
        }
      });
    },
    installWgt(path) {
      plus.runtime.install(
        path,
        {},
        function () {
          plus.nativeUI.closeWaiting();
          plus.nativeUI.alert("更新完成！", function () {
            plus.runtime.restart(); //安装成功后重启应用
          });
        },
        function (e) {
          plus.nativeUI.closeWaiting();
          plus.nativeUI.toast("安装更新失败！");
        }
      );
    },
    ignore(){
      localStorage.setItem('ignoreVersionKey', this.data.versionKey * 10000)
      this.$router.replace('/home')
    }
  },
  created() {
    this.data = this.Version.data;
    this.versionKey = (versionKey / 10000).toFixed(4);
    this.data.versionKey = (this.data.versionKey / 10000).toFixed(4);
  },
};
</script>

<style scoped>
.down {
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: #fff;
}
h2 {
  height: 50px;
  line-height: 50px;
}
.versionKey {
  height: 50px;
}
.force {
  height: 30px;
  line-height: 30px;
  color: #f00;
}
.introduce {
  width: calc(100% - 20px);
  height: calc(100% - 270px);
  overflow-x: hidden;
  overflow-y: scroll;
  margin-bottom: 10px;
}
.btn {
  padding-top: 10px;
  height: 90px;
}
</style>
